<template>
  <basic-layout>
    <view class="appointment-container">
      <view class="appointment-header">
        <text class="header-text">立即预约</text>
        <text class="header-subtext">师傅免费上门</text>
      </view>

      <view class="yue-box">
        <image class="yue" :src="yue" mode="widthFix" />
      </view>

      <view class="appointment-form">
        <view class="form-item">
          <view class="form-label">预约人<text class="required">*</text></view>
          <input
            class="form-input"
            type="text"
            placeholder="请填写预约人真实姓名"
            v-model="formData.name"
          />
        </view>

        <view class="form-item">
          <view class="form-label">手机号<text class="required">*</text></view>
          <input
            class="form-input"
            type="number"
            placeholder="请填写预约人手机号"
            v-model="formData.phone"
          />
        </view>

        <view class="form-item">
          <view class="form-label"
            >所在区域<text class="required">*</text></view
          >
          <picker class="form-picker" mode="region" @change="onRegionChange">
            <view class="picker-text">{{
              formData.region || "请选择省市区"
            }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label"
            >详细地址<text class="required">*</text></view
          >
          <input
            class="form-input"
            type="text"
            placeholder="请填写预约人详细地址"
            v-model="formData.address"
          />
        </view>

        <view class="form-item">
          <view class="form-label">备注</view>
          <textarea
            class="form-textarea"
            placeholder="请填写备注"
            v-model="formData.remark"
          />
        </view>

        <view class="form-item">
          <view class="form-label">上传图片</view>
          <view class="upload-container" @tap="chooseImage">
            <view class="upload-button">
              <text class="upload-icon">+</text>
            </view>
          </view>
        </view>
      </view>

      <view class="submit-button" @tap="submitForm">立即预约</view>
    </view>
  </basic-layout>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Taro from "@tarojs/taro";
import yue from "@/assets/imgs/yue.png";
import BasicLayout from "@/layouts/basic-layout.vue";

definePageConfig({
  // navigationBarTitleText: '分类',
  navigationStyle: "custom",
});

interface FormData {
  name: string;
  phone: string;
  region: string;
  address: string;
  remark: string;
  images: string[];
}

const formData = ref<FormData>({
  name: "",
  phone: "",
  region: "",
  address: "",
  remark: "",
  images: [],
});

const onRegionChange = (e) => {
  const { value } = e.detail;
  formData.value.region = value.join(" ");
  console.log("省市区", e);
};

const chooseImage = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    },
  });
};

const submitForm = () => {
  // 表单验证
  if (!formData.value.name) {
    Taro.showToast({ title: "请填写预约人姓名", icon: "none" });
    return;
  }
  if (!formData.value.phone) {
    Taro.showToast({ title: "请填写手机号", icon: "none" });
    return;
  }
  if (!formData.value.region) {
    Taro.showToast({ title: "请选择所在区域", icon: "none" });
    return;
  }
  if (!formData.value.address) {
    Taro.showToast({ title: "请填写详细地址", icon: "none" });
    return;
  }

  // 提交表单逻辑
  console.log("提交表单数据:", formData.value);
  // 这里添加实际的表单提交逻辑
  Taro.showLoading({ title: "提交中..." });

  // 模拟提交
  setTimeout(() => {
    Taro.hideLoading();
    Taro.showToast({ title: "预约成功", icon: "success" });
    // 可以在这里添加跳转逻辑
  }, 1500);
};
</script>

<style lang="scss">
.appointment-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.appointment-header {
  // margin-bottom: 30rpx;
  // background: linear-gradient(to right, #4a90e2, #6ab0ff);
  color: #fff;
  // padding: 40rpx 30rpx;
  // border-radius: 12rpx;
  // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  position: absolute;
  width: 80%;
  top: 100rpx;

  .header-text {
    font-size: 54rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    // position: relative;
    transform: translateX(-40rpx);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .header-subtext {
    font-size: 42rpx;
    font-weight: bold;
    transform: translateX(20rpx);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

.appointment-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-top: 380rpx;
  position: relative;
  z-index: 1;
}

.form-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;

  .required {
    color: #ff4d4f;
    margin-left: 4rpx;
  }
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;

  .picker-text {
    font-size: 28rpx;
    color: #999;
  }
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.upload-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.upload-button {
  width: 160rpx;
  height: 160rpx;
  background-color: #e0e0e0;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  margin-bottom: 20rpx;

  .upload-icon {
    font-size: 60rpx;
    color: #f7a93b;
  }
}

.submit-button {
  width: 100%;
  height: 90rpx;
  background-color: #f7a93b;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
  box-shadow: 0 6rpx 12rpx rgba(255, 149, 0, 0.3);
}

.yue-box {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  .yue {
    height: 100%;
    width: 100%;
  }
}
</style>
